<template>
    <div class="page">
        <el-row :gutter="20">
            <el-col :sm="24" :md="12" :lg="6">
                <el-card class="box-card">
                    <countTo :startVal='0' :endVal='10000' :duration='5000' prefix="$" class="num"></countTo>
                </el-card>
            </el-col>
            <el-col :sm="24" :md="12" :lg="6">
                <el-card class="box-card">
                    <countTo :startVal='0' :endVal='500' :duration='1000' suffix="RMB" class="num"></countTo>
                </el-card>
            </el-col>
            <el-col :sm="24" :md="12" :lg="6">
                <el-card class="box-card">
                    <countTo :startVal='0' :endVal='888' :duration='1500' prefix="$" class="num"></countTo>
                </el-card>
            </el-col>
            <el-col :sm="24" :md="12" :lg="6">
                <el-card class="box-card">
                    <countTo :startVal='0' :endVal='750' :duration='1200' prefix="$" class="num"></countTo>
                </el-card>
            </el-col>
        </el-row>
        <ChfEcharts style="margin-top:100px" :echartsConfig="echartsConfig" />
    </div>
</template>

<script>
import countTo from 'vue-count-to';
// import lineChart from "./components/lineChart.vue"
import ChfEcharts from "@/components/chf-echarts"
import { initTheme } from "@/style/theme.js"


export default {
    components: { countTo, ChfEcharts },
    data () {
        return {
            echartsConfig: {
                options: {
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '联盟广告',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '视频广告',
                            type: 'line',
                            stack: '总量',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '直接访问',
                            type: 'line',
                            stack: '总量',
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '搜索引擎',
                            type: 'line',
                            stack: '总量',
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                }
            },
            theme: true
        }
    },
}
</script>

<style lang="scss" scoped>
.page {
    .box-card {
        text-align: center;
        margin-bottom: 20px;
    }
    .num {
        color: #f4516c;
        font-size: 40px;
        font-weight: bold;
    }
}
</style>